<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script src="../viewstyle/js/echarts_min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../viewstyle/js/jquery.2.2.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/layui/layui.all.js"></script>
    <script src="/admin/js/token.js"></script>
</head>
<style type="text/css">
    .font {
        color: gray;
    }
    *{
        background-color: white;
    }
    .i-font {
        font-size: 30px;
        color: #33ABA0;
    }

    .num-font {
        font-size: 50px;
        color: #33ABA0;
    }

    .tu-box {
        height: 400px;
        border: 1px solid #CCCCCC;
        margin: auto;
    }
    .margin{
        margin-top: 30px;
    }
</style>

<body>

<div class="layui-row">
    <!--总在线时长-->
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 margin">
        <div class="grid-demo">
            <div id="main3" style="text-align: center;">
                <i class="layui-icon layui-icon-log i-font"></i><br /><br />
                <h1 class="num-font" id="number1"></h1>
                <!--ajax传值-->
                <span class="font">小时/hour</span><br /><br />
                <span class="font">终端在线时长</span>
            </div>
        </div>
    </div>
    <!--全部终端数量-->
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 margin">
        <div class="grid-demo">
            <div id="main4" style="text-align: center;">
                <i class="layui-icon layui-icon-chart i-font"></i><br /><br />
                <h1 class="num-font" id="number2"></h1>
                <!--ajax传值-->
                <span class="font">个数/number</span><br /><br />
                <span class="font">全部终端数量</span>
            </div>
        </div>
    </div>
</div>
<!--饼状图-->
<div class="layui-row">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <div class="grid-demo">
            <div id="main1" class="tu-box margin"></div>
        </div>
    </div>
</div>
<!--柱状图-->
<div class="layui-row">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
        <div class="grid-demo">
            <div id="main2" class="tu-box"></div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    //饼状图
    var token1 = localStorage.getItem("local_store");
    var token = $.parseJSON(token1);

    var myChart1 = echarts.init(document.getElementById('main1'));

    var option1 = {
        title: {
            text: '在/离线设备比例图',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data: []
        },
        calculable: true,
        series: [{
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: []
        }]
    };

    var namess = ["在线","离线"];
    var numss = [];

    $.ajax({
        type: "get",
        url: '/admin/tongji/zhongduan',
        async: true,
        data: {
            token:token.token
        },
        dataType: "json", //返回数据形式为json
        success: function(result) {
            var time = (result.data.zhongduanzongtime/3600).toFixed(2);
            //终端在线时长
            if (time=="NaN")
            {
                $("#number1").html("未登录");
            }
            else {
                $("#number1").html(time);
            }
            //终端数量
            $("#number2").html(result.data.zhongduanshu);
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if(result) {
                var obj = new Object();
                if(result.data.zaixianshu!="0"){
                    obj.name = "在线";
                    obj.value = result.data.zaixianshu;
                }
                numss.push(obj);
                var obj2 = new Object();
                if (result.data.lixianshu!="0"){
                    obj2.name = "离线";
                    obj2.value = result.data.lixianshu;
                }
                numss.push(obj2);
                myChart1.hideLoading(); //隐藏加载动画
                myChart1.setOption({
                    legend: {
                        data: namess
                    },
                    series: {// 根据名字对应到相应的系列
                        name: ['数量'],
                        data: numss
                    }
                });

            }

        },
        error: function(errorMsg) {
            //请求失败时执行该函数
            myChart1.hideLoading();
        }
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);

    //柱状图
    var myChart2 = echarts.init(document.getElementById('main2'));

    var option2 = {
        title: {
            text: 'APK使用量柱状图'
        },
        color: ['#33ABA0'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        }

    };

    var names = [];
    var nums = [];
    $.ajax({
        type: "get",
        url: '/admin/apk/searchApkWithVisit',
        async: true,
        data: {},
        dataType: "json", //返回数据形式为json
        success: function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if(result) {
                for(var i = 0; i < result.data.length; i++) {
                    names.push(result.data[i].apkName); //挨个取出类别并填入类别数组
                }
                for(var i = 0; i < result.data.length; i++) {
                    nums.push(result.data[i].apkStatistics); //挨个取出销量并填入销量数组
                }
                myChart2.hideLoading(); //隐藏加载动画
                myChart2.setOption({
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    }, //加载数据图表
                    xAxis: [{
                        type: 'category',
                        data: names,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '直接访问',
                        type: 'bar',
                        barWidth: '50%',
                        data: nums
                    }]
                });
            }
        },
        error: function(errorMsg) {
            //请求失败时执行该函数
            myChart2.hideLoading();
        }
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);

    //根据窗口大小自适应图表
    window.addEventListener("resize", function () {
        myChart1.resize();
        myChart2.resize();
    });
</script>

</html>